<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="1000px"
  >
    <div slot="title" class="align-cm">
      与客户 <b>{{ _.get(tempData, 'name', '') }}</b> 相关的报表如下：
    </div>
    <!-- <div class="text-red">线上测试中，请勿使用</div> -->
    <el-button plain type="primary" @click="ajaxData()">刷新</el-button>
    <el-button plain type="warning" @click="创建新报表()">新增</el-button>
    <el-table
      class="mt5 myStyle"
      style="width: 100%"
      ref="table"
      v-loading="loading"
      :data="tableList"
      highlight-current-row
    >
      <el-table-column label="序号" width="50" type="index"> </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">{{ scope.row.addTime }}</template>
      </el-table-column>
      <el-table-column label="修改时间">
        <template slot-scope="scope">{{ scope.row.editTime }}</template>
      </el-table-column>
      <el-table-column label="客户姓名">
        <template slot-scope="scope">{{
          _.get(tempData, 'name', '')
        }}</template>
      </el-table-column>
      <el-table-column label="报表ID" min-width="68">
        <template slot-scope="scope">{{ scope.row.报表id }}</template>
      </el-table-column>
      <el-table-column label="报表title">
        <template slot-scope="scope">{{ scope.row.报表title }}</template>
      </el-table-column>
      <!-- <el-table-column label="状态">
        <template slot-scope="scope">
          <span class="text-gray" v-if="scope.row.state === 0">未提交</span>
          <span class="text-yellow" v-if="scope.row.state === 1">审核中</span>
          <span class="text-green" v-if="scope.row.state === 2">通过</span>
          <span class="text-red" v-if="scope.row.state === 3">拒绝</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <!-- 0:未提交 1:审核中 2：通过 3:拒绝 (0,3状态可改为1， 1状态下可改为2，3) -->
          <template v-if="[0, 3].includes(scope.row.state)">
            <el-button @click="编辑报表(scope.row)" type="text" size="mini"
              >编辑</el-button
            >
          </template>
          <!-- 
            <el-button @click="提交审核(scope.row)" type="primary" size="mini">提交审核</el-button>
            
          </template> -->
          <!-- <el-button @click="删除报表(scope.row)" type="danger" size="mini">
            <i class="fa fa-fw fa-trash-o"></i>删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <div class="align-rm" ref="pag">
      <!-- prettier-ignore -->
      <!-- <el-pagination
        @size-change="handleSizeChange($event,ajaxData);"
        @current-change="handleCurrentChange($event,ajaxData);"
        :current-page="page.current"
        :page-sizes="page.sizes"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination> -->
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
import pagination from '@/mixin/pagination.vue';
import tableList from '@/mixin/tableList.vue';

export default {
  name: 'statementsAudit',
  mixins: [tableList, pagination],
  data() {
    return {
      tableList: [],
      isDev: process.env.NODE_ENV == 'development',
      visible: false,
      tempData: null,
      form: {
        desc: '',
      },
    };
  },
  computed: {
    ...mapState(['dialog', 'userInfo']),
    arg: function() {
      return {};
    },
  },
  methods: {
    init: function(tempData) {
      this.visible = true;
      this.tempData = tempData;
      this.$nextTick(() => {
        this.ajaxData();
      });
      return;
    },
    formatList: function(item) {
      return {
        报表id: this._.get(item, 'report_Id', ''),
        员工id: this._.get(item, 'company_Employee_Id', ''),
        公司id: this._.get(item, 'eS_Company_Id', ''),
        外部联系人id: this._.get(item, 'external_userid', ''),
        报表title: this._.get(item, 'title', ''),
        // 报表是否完成:this._.get(item,'isComplete',''),
        state: this._.get(item, 'checkState', ''),
        addTime: (t => {
          return this.$moment(t).isValid()
            ? this.$moment(t).format('YYYY-MM-DD hh:mm:ss')
            : '';
        })(_.get(item, 'addTime', '')),
        editTime: (t => {
          return this.$moment(t).isValid()
            ? this.$moment(t).format('YYYY-MM-DD hh:mm:ss')
            : '';
        })(_.get(item, 'editTime', '')),
      };
    },
    ajaxData: function() {
      let params = Object.assign({
        companyEmployeeId: this.$store.getters['userInfo/getEmployee']
          .company_Employee_Id,
        eSCompanyId: this._.get(this.tempData, 'eS_Company_Id', ''),
        externaluserid: this._.get(this.tempData, 'external_userid', ''),
      });
      this.$api.报表
        .getList报表ByUserInfo(params)
        .then(res => {
          if (res.code == 200) {
            return Promise.resolve(res.data);
          }
        })
        .then(res => {
          // this.page.total = res.recordsTotal;
          this.clearTable();
          res.forEach(v => {
            let item = this.formatList(v);
            this.addTableRow(item);
          });
        });
    },
    创建新报表: function() {
      let userInfo = this.tempData;
      bus.$emit('创建或修改报表', {
        userInfo: userInfo,
        报表: null,
      });
      this.close();
    },
    编辑报表: function(row) {
      let userInfo = this.tempData;
      bus.$emit('创建或修改报表', {
        userInfo: userInfo,
        报表: row,
      });
      this.close();
    },
    提交审核: function(row) {
      this.$api.报表
        .update报表ById(
          {},
          {
            report_Id: row.报表id,
            company_Employee_Id: row.员工id,
            eS_Company_Id: row.公司id,
            external_userid: row.外部联系人id,
            title: row.报表title,
            checkState: 1,
          },
        )
        .then(res => {
          if (res.code == 200 && res.data > 0) {
            this.$message.success('等待审核');
            this.ajaxData();
          }
        })
        .catch(err => {
          console.error(err);
          this.$message.error('提交失败' + this._.get(err, 'message', ''));
        })
        .finally(_ => {});
      // let userInfo = this.tempData;
      // bus.$emit('创建或修改报表',{userInfo})
    },
    删除报表: function(row) {
      let rportId = this._.get(row, '报表id', false);
      // if(!rportId){}
      this.$api.报表
        .del报表ById({
          rportId: rportId,
        })
        .then(res => {
          if (res.code == 200 && res.data > 0) {
            this.$message.success('删除成功');
            this.removeData({ 报表id: rportId });
          }
        })
        .catch(err => {
          this.$message.error('删除失败，' + this._.get(err, 'message', ''));
        })
        .finally(_ => {});
    },

    close: function() {
      this.visible = false;
      this.tempData = null;
    },
    cancel: function() {
      this.close();
    },
  },
  mounted: function() {
    this.page.size = 5;
    bus.$on('准备报表审核', temp => {
      this.init(temp);
    });
  },
  updated: function() {},
};
</script>

<style></style>
